<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>操作日志</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<link href="css/mui.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.css" />
		<link rel="stylesheet" type="text/css" href="css/mui.depicker.css" />
		<link rel="stylesheet" type="text/css" href="css/comment.css" />
		<link rel="stylesheet" type="text/css" href="css/center.css" />
	</head>

	<body>
		<div id="app" style="height: 100%;">
			<!-- 主界面菜单同时移动 -->
			<!-- 侧滑导航根容器 -->
			<div class="mui-off-canvas-wrap mui-slide-in">
				<!-- 菜单容器 -->
				<aside class="mui-off-canvas-right">
					<div class="mui-scroll-wrapper">
						<div class="mui-scroll">
							<!-- 菜单具体展示内容 -->
							<div class="canvasBox">
								<div>开始时间</div>
								<div class="canvasTime">
									<input class="timeText canvasTime_start" readonly type="text" value="" placeholder="" />
								</div>
								<div>结束日期</div>
								<div class="canvasTime">
									<input class="timeText canvasTime_end" readonly type="text" value="" placeholder="" />
								</div>
								<div>操作等级</div>
								<div class="canvasTime">
									<select class="level">
										<option value="0">全部</option>
										<option value="Info">Info</option>
										<option value="3">333</option>
										<option value="4">444</option>
										<option value="5">555</option>
									</select>
								</div>
								<div class="" style="text-align: center;">
									<button type="button" class="mui-btn mui-btn-primary canvasTrue">确定</button>
									<button type="button" class="mui-btn mui-btn-warning canvasWarn">取消</button>
								</div>
							</div>
						</div>
					</div>
				</aside>
				<!-- 主页面容器 -->
				<div class="mui-inner-wrap">
					<!-- 主页面标题 -->
					<header class="mui-bar mui-bar-nav gradient_normal">
						<div style="height: 20px;"></div>
						<div class="mui-action-back mui-pull-left mui-icon mui-icon-arrowleft"></div>
						<h1 class="mui-title">操作日志</h1>
						<div class="mui-action-menu mui-pull-right mui-icon mui-icon-search searchBtn"></div>
					</header>
					<!-- 主页面内容容器 -->
					<div class="mui-content mui-scroll-wrapper" style="padding-top: 64px;">
						<div class="mui-scroll" style="bottom: 0;top: 64px;overflow-y: auto;">
							<!-- 主界面具体展示内容 -->
							<div class="operationBox">
								<div class="noData" v-if="dataList.length<1" style="margin-top: 30%;">没有相关数据</div>
								<div class="operationItem" v-for="item in dataList" :key="item.index">
									<strong class="eqtitle">
										<div class="line"></div>
										<div class="title">{{item.UserName}}</div>
									</strong>
									<div class="info">{{item.Message}}</div>
									<div class="infobtm">
										<img src="images/toperation01.png" >
										<span class="flow">{{item.Level}}</span>
										<img src="images/toperation02.png" >
										<span>{{item.Logged}}</span>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="mui-off-canvas-backdrop" id="backdrop"></div>
				</div>
			</div> 
		</div>
		<script src="js/mui.js"></script>
		<script src="js/jquery.js"></script>
		<script src="js/mui.picker.js" type="text/javascript"></script>
		<script src="js/mui.dtpicker.js" type="text/javascript"></script>
		<script src="js/rem.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vue@2.6.0"></script>
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<script type="text/javascript">
			var app = new Vue({
				el: "#app",
				data: {
					url: "http://112.54.80.235:8038",
					dataList:[]
				},
				mounted() {
					mui.init();
					mui.plusReady(function() {
						//关闭等待框
						plus.nativeUI.closeWaiting();
						//绑定数据
						getData(0,0,0);
						//搜索--打开搜索框
						$('.searchBtn').click(function() {
							mui('.mui-off-canvas-wrap').offCanvas('show');
						});
						//搜索--开始时间
						$('.canvasTime_start').click(function() {
							var strPicker = new mui.DtPicker({
								type: 'date'
							});
							strPicker.show(function(e) {
								$('.canvasTime_start').val(e)
							})
						});
						//搜索--结束时间
						$('.canvasTime_end').click(function() {
							var endPicker = new mui.DtPicker({
								type: 'date'
							});
							endPicker.show(function(e) {
								$('.canvasTime_end').val(e)
							})
						});
						// 监听点击遮罩关闭事件
						$("#backdrop").click(function(event) {
							//阻止默认事件  
							event.preventDefault();
							mui('.mui-off-canvas-wrap').offCanvas('close');
						});
						//搜索--点击取消搜索按钮
						$('.canvasWarn').click(function() {
							mui('.mui-off-canvas-wrap').offCanvas('close');
						});
						//搜索--确定按钮
						$('.canvasTrue').on("tap",function(){
							console.log(324);
							var canvasTime_start=$('.canvasTime_start').val();
							var canvasTime_end=$('.canvasTime_end').val();
							var level=$('.level').val();
							getData(canvasTime_start,canvasTime_end,level);
							mui('.mui-off-canvas-wrap').offCanvas('close');
						})
					});
					function getData(startime,endtime,level){
						//获取数据
						axios.get(app.url + '/actionapi/Users/GetSJLogging', {
								params: {
									startime: startime,
									endtime: endtime,
									level: level
								}
							})
							.then(function(response) {
								var data = response.data.data;
								app.dataList = data;
								app.dataList.splice(10)
							})
							.catch(function(error) {
								plus.nativeUI.alert("GetSJLogging接口有误", function(e) {
									console.log(e.index);
								}, "信息提示", '确定');
							});
					}
				}
			})
		</script>
	</body>

</html>
